<!doctype html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>叮叮金融-修改密码</title>
    <!--<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">-->
    <link rel="stylesheet" th:href="@{/css/login/materialdesignicons.min.css}">
    <link rel="stylesheet" th:href="@{/css/login/vendor.bundle.base.css}">
    <link rel="stylesheet" th:href="@{/css/login/style.css}">
    <style>
        .forgot-btn{
            color: white;
            background-color: #007bff;
            border-color: #007bff;
        }
        .forgot-btn:hover{
            color: white;
            background-color: #0067de;
            border-color: #0067de;
        }
    </style>
</head>
<body style="background-color: #3895e8">
    <div style="box-sizing: border-box;
                height: 100vh;
                background: url('/img/login/bj.jpg') no-repeat center;
                background-size: auto 100vh;
                position:  relative;">
        <div style="background-color: white;
                    border-radius: 6px;
                    width: 460px;
                    top: 140px;
                    left: 50%;
                    margin-left: -230px;
                    padding: 65px 60px 30px 60px;
                    position: fixed;">
            <img src="/img/login/logo.png" width="200px" style="position: absolute;
                                                    top: -35px;
                                                    left: 125px;">
            <a th:href="@{/login}" style="position: absolute;
                                            top: 80px;
                                            left: 60px;
                                            color: #a3b0b6;
                                            font-size: 14px;">返回登录</a>
            <p style="text-align: center;color: #76b9f7;font-size: 18px;">修改密码</p>
            <hr>
            <div class="form-group mt-4">
                <input name="phone" type="text" class="form-control form-control-lg" placeholder="手机号">
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input name="password" type="password" class="form-control form-control-lg" placeholder="新密码">
                    <div class="input-group-append bg-transparent">
                  <span class="input-group-text bg-transparent border-left-0" style="cursor: pointer">
                    <i id="showPassword" class="mdi mdi-eye"></i>
                  </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input name="verify" type="text" class="form-control form-control-lg mr-3" placeholder="验证码" autocomplete="off">
                    <button id="sendVerifyBtn" type="button" class="col-5 btn btn-info">发送验证码</button>
                </div>
            </div>
            <button id="forgotBtn" class="forgot-btn btn btn-block mt-5">修改</button>
        </div>
    </div>
    <span style="position: fixed;
                bottom: 10px;
                left: 45%;
                color: #ffffffe8;
                font-size: 12px;">Copyright &copy; 2020  叮叮金融.</span>
<script rel="script" src="/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
</body>
<script>
    //显示与隐藏密码
    $(".input-group-append").click(function () {
        if($("#showPassword").hasClass("mdi-eye")){
            $("input[name='password']").attr("type","text");
            $("#showPassword").removeClass("mdi-eye");
            $("#showPassword").addClass("mdi-eye-off");
        }else {
            $("input[name='password']").attr("type","password");
            $("#showPassword").removeClass("mdi-eye-off");
            $("#showPassword").addClass("mdi-eye");
        }
    })
    $(function () {
        //发送验证码
        var verBtn = document.getElementById("sendVerifyBtn");
        var time = 60;
        verBtn.onclick = function() {
            //防止发送多次
            verBtn.style.cursor = "no-drop";
            verBtn.disabled = true;
            if(!(/^1[3-9]\d{9}$/.test($("input[name='phone']").val()))) {
                verBtn.innerHTML = "发送验证码";
                verBtn.disabled = false;
                $(verBtn).css("cursor","pointer");
            }
            //请求发送验证码
            $.post("/sendForgotVerify",{phone:$("input[name='phone']").val()},function (data) {
                if (data == "success"){
                    //发送成功弹窗提示
                    layer.msg('发送成功', {time: 3000, icon:1});

                    //一分钟内禁止再次发送
                    var timer = setInterval(function() {
                        time--;
                        verBtn.innerHTML = time + "秒";
                        verBtn.disabled = true;
                        //禁止手势
                        $(verBtn).css("cursor","no-drop");
                        if(time == 0) {
                            time = 60;
                            clearInterval(timer);
                            verBtn.innerHTML = "发送验证码";
                            verBtn.disabled = false;
                            $(verBtn).css("cursor","pointer");
                        }
                    }, 1000);

                } else {
                    verBtn.style.cursor = "pointer";
                    verBtn.disabled = false;
                    $("input[name='phone']").focus();
                    layer.msg(data, {time: 3000, icon:7});
                }
                //console.log(data);
            },"text")
        }
    })
    $("#forgotBtn").click(function () {
        var phone = $("input[name='phone']").val();
        var password = $("input[name='password']").val();
        var verify = $("input[name='verify']").val();
        var data = {
            "phone":phone,
            "password":password,
            "verify":verify,
        }
        $.ajax({
            url:"/userForgot",
            type:"POST",
            data: data,
            dataType:"text",
            success:function (data) {
                //console.log(data)
                if (data == "success"){
                    layer.msg("修改成功,即将前往登录页面",{time: 3000, icon:6});
                    setTimeout(function () {
                        window.location.href = "/login"
                    },3000)
                } else {
                    layer.msg(data);
                }
            },
            error:function (data) {
                //console.log(data)
            }
        })
    })
</script>
</html>